<template>
	<view class="user-container">
		<view class="user-header">
			<view class="user-profile">
				<image :src="enterprise.logo" mode="aspectFill" class="avatar-img"></image>
				<view class="user-name">{{ userInfo.name || '18888888888' }}</view>
				<view class="user-info">
					<view class="account-status">普通账户</view>
					<view class="business-status" :class="{'status-closed': enterprise.expireStatus}">
						{{ enterprise.expireStatus ? '已打烊' : '营业中' }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="content-section">
			<view class="profit-card" v-if="userInfo.staffId">
				<view class="card-tabs">
					<u-tabs
						:list="list"
						font-size="24"
						inactive-color="#666666"
						:bar-style="{ borderRadius: '4rpx', height: '4rpx', width: '28rpx', backgroundColor: '#FB5904', bottom: '-4rpx' }"
						:active-item-style="{ color: '#FB5904', fontSize: '28rpx', fontWeight: 'bold' }"
						:is-scroll="false"
						:current="current"
						@change="tabChange"
					></u-tabs>
				</view>
				<view class="profit-stats">
					<view class="stat-item">
						<view class="amount"><text class="currency">¥</text>{{ $utils.formatNub(total_profit) }}</view>
						<view class="label">总提成</view>
					</view>
					<view class="stat-item">
						<view class="amount"><text class="currency">¥</text>{{ $utils.formatNub(proportion_profit) }}</view>
						<view class="label">比例提成</view>
					</view>
					<view class="stat-item">
						<view class="amount"><text class="currency">¥</text>{{ $utils.formatNub(goods_profit) }}</view>
						<view class="label">商品提成</view>
					</view>
				</view>
			</view>
			
			<view class="tools-card">
				<view class="section-title">功能列表</view>
				<view class="tools-list">
					<view class="tool-item" @click="goPage('/pagesB/app/index')">
						<view class="tool-icon-box bg-orange">
							<image src="../../static/img/ic-jy.png" mode="aspectFill" class="tool-icon"></image>
						</view>
						<view class="tool-info">
							<view class="tool-name">设置我的应用</view>
							<view class="tool-desc">自定义首页常用功能</view>
						</view>
						<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
					</view>
					<view class="tool-item" @click="goPage('/pagesB/index/WxCode')">
						<view class="tool-icon-box bg-orange">
							<image src="../../static/img/ic-rjtg.png" mode="aspectFill" class="tool-icon"></image>
						</view>
						<view class="tool-info">
							<view class="tool-name">软件推广</view>
							<view class="tool-desc">分享软件给客户和朋友</view>
						</view>
						<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
					</view>
					
					<view class="tool-item" @click="goPage('/pagesT/user/editPwd')">
						<view class="tool-icon-box bg-red">
							<image src="../../static/img/ic-xgmm.png" mode="aspectFill" class="tool-icon"></image>
						</view>
						<view class="tool-info">
							<view class="tool-name">修改密码</view>
							<view class="tool-desc">定期更新密码保障账户安全</view>
						</view>
						<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
					</view>
					
					<view class="tool-item" @click="goPage('/pagesT/user/editID')">
						<view class="tool-icon-box bg-green">
							<image src="../../static/img/ic-xgzh.png" mode="aspectFill" class="tool-icon"></image>
						</view>
						<view class="tool-info">
							<view class="tool-name">修改账号</view>
							<view class="tool-desc">更新账号信息和绑定手机</view>
						</view>
						<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
					</view>
					
					<view class="tool-item" @click="logout">
						<view class="tool-icon-box bg-red">
							<image src="../../static/img/ic-tcdl.png" mode="aspectFill" class="tool-icon"></image>
						</view>
						<view class="tool-info">
							<view class="tool-name">退出登录</view>
							<view class="tool-desc">退出当前账号登录状态</view>
						</view>
						<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			tabbar_current: 4,
			userCenterId: '',
			goods_profit: '', //商品收益
			proportion_profit: '', //比例收益
			total_profit: '', //总收益
			current: 0,
			list: [
				{
					name: '总提成'
				},
				{
					name: '月提成'
				},
				{
					name: '日提成'
				}
			],
			supplier_data: {}
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		enterprise() {
			return this.$store.state.enterprise;
		}
	},
	onLoad() {
		this.tabChange(0);
	},
	onShareAppMessage(res) {
		return {
			title: '订货虎',
			path: '/pages/index/index'
		};
	},
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		tabChange(index) {
			if(!this.userInfo.staffId){
				return
			}
			this.current = index;
			this.$u.api.getStaffInfo(this.userInfo.staffId).then(res => {
				if (this.current === 1) {
					this.proportion_profit = res.data.rewardData.rewardMonth.order;
					this.goods_profit = res.data.rewardData.rewardMonth.goods;
					this.total_profit = res.data.rewardData.rewardMonth.total;
				} else if (this.current === 2) {
					this.proportion_profit = res.data.rewardData.rewardDay.order;
					this.goods_profit = res.data.rewardData.rewardDay.goods;
					this.total_profit = res.data.rewardData.rewardDay.total;
				} else {
					this.proportion_profit = res.data.rewardData.rewardTotal.order;
					this.goods_profit = res.data.rewardData.rewardTotal.goods;
					this.total_profit = res.data.rewardData.rewardTotal.total;
				}
				this.supplier_data = res.data;
			});
		},
		changeEn() {
			this.goPage('/pagesB/enterprise/index');
		}
	}
};
</script>

<style scoped lang="scss">
.user-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	position: relative;
}

.user-header {
	position: relative;
	padding: 60rpx 0 40rpx;
	background-color: #FB5904;
	text-align: center;
	
	.user-profile {
		padding: 20rpx 0 40rpx;
		
		.avatar-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #ffffff;
			border: 4rpx solid rgba(255, 255, 255, 0.5);
			margin-bottom: 16rpx;
		}
		
		.user-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #FFFFFF;
			margin-bottom: 16rpx;
		}
		
		.user-info {
			display: flex;
			justify-content: center;
			align-items: center;
			
			.account-status {
				display: inline-block;
				font-size: 24rpx;
				color: #FFFFFF;
				background-color: rgba(255, 255, 255, 0.2);
				padding: 4rpx 20rpx;
				border-radius: 20rpx;
				margin-right: 16rpx;
			}
			
			.business-status {
				display: inline-block;
				font-size: 24rpx;
				color: #ffffff;
				background-color: rgba(6, 241, 84, 0.9);
				padding: 4rpx 20rpx;
				border-radius: 20rpx;
				
				&.status-closed {
					color: #ffffff;
					background-color: rgba(245, 56, 65, 0.9);
				}
			}
		}
	}
}

.content-section {
	padding: 20rpx 32rpx;
	
	.profit-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 30rpx;
		
		.card-tabs {
			border-bottom: 1rpx solid #f5f5f5;
			padding: 10rpx 0;
		}
		
		.profit-stats {
			display: flex;
			padding: 30rpx 0;
			
			.stat-item {
				flex: 1;
				text-align: center;
				position: relative;
				
				&:not(:last-child):after {
					content: '';
					position: absolute;
					right: 0;
					top: 10rpx;
					height: 80%;
					width: 1rpx;
					background-color: #f5f5f5;
				}
				
				.amount {
					font-size: 36rpx;
					color: #FB5904;
					font-weight: 600;
					font-family: DIN-Medium;
					margin-bottom: 10rpx;
					
					.currency {
						font-size: 24rpx;
						margin-right: 4rpx;
					}
				}
				
				.label {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
	
	.tools-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 0 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		
		.section-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
		}
		
		.tools-list {
			.tool-item {
				display: flex;
				align-items: center;
				padding: 24rpx 30rpx;
				border-bottom: 1px solid #f5f5f5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.tool-icon-box {
					width: 70rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					border-radius: 10rpx;
					
					&.bg-orange {
						background-color: #FFF0E6;
					}
					
					&.bg-red {
						background-color: #FFEEEE;
					}
					
					&.bg-green {
						background-color: #E6FFF0;
					}
					
					.tool-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
				
				.tool-info {
					flex: 1;
					
					.tool-name {
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 6rpx;
					}
					
					.tool-desc {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
}
</style>
